import { Avatar, Spin, message } from 'antd'
import styles from './index.less'
import { UserOutlined, MessageOutlined } from '@ant-design/icons';
import { useLazyList } from '@/hooks';
import { getReCommentList } from '@/services/article';
import { useEffect, useId, useMemo, useState } from 'react';
import CommentInput from '../../CommentInput';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { delComment } from '@/services/favorite';
import { isMeById } from '@/utils/info';
import { Modal} from 'antd';

const { confirm } = Modal;

export default ({ name, id, content, createdTime, avatar, reInputId, changeReInputId, userId,onChange }) => {
    const { userInfo } = useModel('global');
    // const { list, pageParams, nextPage, refreshPage, loading } = useLazyList({
    //     api: getReCommentList,
    //     manual: true,
    //     extraParams: {
    //         commentId: id,
    //     }
    // });
    const [data, setData] = useState([]);//暂存数据
    const [delData,setDelData] = useState([])
    // const commentData = useMemo(() => {
    //     return [...data, ...(list || [])]
    // }, [data, list])
    // const submitComment = (info) => {
    //     setData((oldV) => {
    //         return [
    //             {
    //                 sendNickname: userInfo.nickname,
    //                 tagertNickname: info.tagertUsername,
    //                 content: info.content,
    //                 id: info.id,
    //                 createdTime: '刚刚',
    //                 targetUserId: info.targetUserId,
    //                 sendAvatar:userInfo.avatar,
    //             },
    //             ...oldV,
    //         ]
    //     })
    //     message.success('评论成功')
    //     onChange(true)
    //     changeReInputId(null)
    // }
    // const reCommentBtn = ({ commentId, targetUserId,tagertNickname }) => {
    //     return <>
    //         <span className={styles.reComment} onClick={() => { changeReInputId(commentId === reInputId ? null : commentId) }}>
    //             {
    //                 commentId === reInputId ? <>取消回复</> : <>
    //                     <MessageOutlined style={{ marginRight: '4px' }} />回复
    //                 </>
    //             }
    //         </span>
    //         {commentId === reInputId && <div style={{ marginTop: '8px' }}>
    //             <CommentInput onSubmit={(info) => submitComment({
    //                 targetUserId:targetUserId,
    //                 tagertNickname:tagertNickname,
    //                 content:info.content,
    //                 id:info.id,
    //             })} commentId={commentId} targetUserId={targetUserId} />
    //         </div>}
    //     </>
    // }
    // useEffect(() => {
    //     if (id) {
    //         refreshPage();
    //     }
    // }, [id])
    const {run:del}= useRequest(delComment,{
        manual:true,
        onSuccess:()=>{
            message.success('删除评论成功')
            onChange(false)
        }
    })
    return <div className={styles.item}>
        <div className={styles.item_left}>
            <Avatar size={32} icon={<UserOutlined />} src={avatar} />
        </div>
        <div className={styles.item_right}>
            <div className={styles.item_name}>{name}</div>
            <div className={styles.item_text}>{content}</div>
            <div>
                {createdTime}
                {
                    isMeById(userId)&&<a className={styles.delBtn} onClick={()=>{
                        
                        confirm({
                            title: '确认删除该评论吗?',
                            icon: null,
                            content: '',
                            onOk() {
                                del(id)
                            },
                            onCancel() {
                            },
                          });

                    }}>删除</a>
                }
                {/* {reCommentBtn({
                    commentId: id,
                    targetUserId: userId,
                    targetNickname:name,
                })} */}
            </div>
            {/* {
                !!commentData.length && <div className={styles.childrenData_list}>
                    {
                        commentData?.map((childItem, childIndex) => {
                            return <div className={styles.childrenData_item} key={childIndex}>
                                <div className={styles.childrenData_item_left}>
                                    <Avatar size={32} icon={<UserOutlined />} src={childItem.avatar} />
                                </div>
                                <div className={styles.childrenData_item_right}>
                                    <div className={styles.childrenData_item_name}>
                                        {
                                            userId === childItem.targetUserId ? <span>{childItem.sendNickname}</span> : <span>{childItem.sendNickname}回复{childItem.targetNickname}</span>
                                        }
                                        <span>：{childItem.content}</span>
                                    </div>
                                    <div className={styles.item_bottom_op}>{childItem.createdTime} {reCommentBtn({
                                        commentId: childItem.id,
                                        targetUserId: childItem.sendUserId,
                                        targetNickname:childItem.sendNickname
                                    })}</div>
                                </div>
                            </div>
                        })
                    }
                </div>
            }
            {
                loading && <Spin />
            }
            {
                pageParams.totalCount > list.length && <div className={styles.expandChildren} onClick={() => nextPage()}>
                    展开评论
                </div>
            } */}
        </div>
    </div>
}